<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="关注">
      <userBody1 :follow="follow"></userBody1>
    </a-tab-pane>
    <a-tab-pane key="2" tab="粉丝" force-render>
      <userBody2 :fans="fan"></userBody2>
    </a-tab-pane>
    <a-tab-pane key="3" tab="关注的专题">
      <userBody3></userBody3>
    </a-tab-pane>
    <a-tab-pane key="4" tab="喜欢和收藏">
      <userBody4></userBody4>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import { defineComponent, ref } from "vue";
import VueEvent from "../../utils/event";
import userBody1 from "../userHome/userBaby1";
import userBody2 from "../userHome/userBaby2";
import userBody3 from "../userHome/userBaby3";
import userBody4 from "../userHome/userBaby4";
import { getfans, getfollows } from "../../api/showUser";

export default defineComponent({
  setup() {
    let activeKey = ref("1");
    let follow = ref([]);
    let fan = ref([]);

    getfans({
      url: "/showUsers/getfans",
      userid: sessionStorage.getItem("userID"),
      success: (res) => {
        // console.log(res.data);
        for (let i = 0; i < res.data.length; i++) {
          fan.value.push({
            uid: res.data[i].uid,
            imgHead: "http://localhost:3000/" + res.data[i].imgHead,
            name: res.data[i].uname,
            followsNum: res.data[i].followsNum,
            fansNum: res.data[i].fansNum,
            AsNum: res.data[i].AsNum,
            numOfLikes: res.data[i].numOfLikes,
          });
        }
        // console.log(fan.value);
      },
      err: (err) => {
        console.log(err);
      },
    });

    getfollows({
      url: "/showUsers/getfollows",
      userid: sessionStorage.getItem("userID"),
      success: (res) => {
        // console.log(res.data);
        for (let i = 0; i < res.data.length; i++) {
          follow.value.push({
            uid: res.data[i].uid,
            imgHead: "http://localhost:3000/" + res.data[i].imgHead,
            name: res.data[i].uname,
            followsNum: res.data[i].followsNum,
            fansNum: res.data[i].fansNum,
            AsNum: res.data[i].AsNum,
            numOfLikes: res.data[i].numOfLikes,
          });
        }
      },
      err: (err) => {
        console.log(err);
      },
    });

    VueEvent.on("userOthers1", () => {
      activeKey.value = "1";
    });
    VueEvent.on("userOthers2", () => {
      activeKey.value = "2";
    });
    VueEvent.on("userOthers3", () => {
      activeKey.value = "3";
    });
    VueEvent.on("userOthers4", () => {
      activeKey.value = "4";
    });

    return {
      activeKey,
      fan,
      follow,
    };
  },
  components: {
    userBody1,
    userBody2,
    userBody3,
    userBody4,
  },
});
</script>

<style scoped>
</style>